<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>游戏大厅 - 模拟经营游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="../../js/core.js"></script>
    <!-- 调试脚本 -->
    <script src="../../js/debug-login.js" defer></script>
    <!-- 引入拆分后的CSS文件 -->
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/layout.css">
    <link rel="stylesheet" href="../../css/components.css">
    <link rel="stylesheet" href="../../css/pages/common.css">
    <link rel="stylesheet" href="../../css/pages/index.css">
    <link rel="stylesheet" href="../../css/pages/index-sidebar.css">
    <!-- 游戏页面专用CSS文件 -->
    <link rel="stylesheet" href="../../css/pages/games.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2D6A4F',     // 自然绿色 - 主色调
                        secondary: '#95D5B2',   // 浅绿色 - 辅助色
                        accent: '#FFB703',      // 琥珀色 - 强调色
                        danger: '#E63946',      // 红色 - 危险色
                        success: '#4CAF50',     // 绿色 - 成功色
                        warning: '#FF9800',     // 橙色 - 警告色
                        dark: '#1B263B',        // 深蓝色 - 文字色
                        light: '#F8F9FA',       // 浅色 - 背景色
                        earth: '#8B4513',       // 土色 - 建筑相关
                        wood: '#DEB887',        // 木材色
                        food: '#8BC34A',        // 食物色
                        people: '#F08080',      // 人口色
                        stone: '#A0A0A0',       // 石头色
                        iron: '#708090',        // 铁矿色
                        gold: '#FFD700',        // 黄金色
                        crystal: '#B9F2FF'      // 水晶色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    backgroundImage: {
                        'village-bg': "url('https://picsum.photos/id/1043/1920/1080')",
                    }
                },
            }
        }
    </script>
    <style>
        /* 游戏标签页按钮样式 */
        .game-tab-btn {
            @apply px-4 py-2 rounded-lg text-center transition-colors duration-200 ease-in-out;
            @apply bg-gray-100 hover:bg-gray-200 font-medium flex flex-col items-center justify-center;
        }
        .game-tab-btn.active {
            @apply bg-primary text-white hover:bg-primary/90;
        }
        .game-tab-btn i {
            @apply text-xl mb-1;
        }
        
        /* 游戏面板样式 */
        .game-panel {
            @apply transition-all duration-300 ease-in-out;
        }
        .game-panel.hidden {
            @apply hidden opacity-0;
        }
        .game-panel.active {
            @apply block opacity-100;
        }
        
        /* 游戏分类标签页按钮样式 */
        .game-category-btn {
            @apply px-4 py-2 rounded-lg text-center transition-colors duration-200 ease-in-out;
            @apply bg-gray-100 hover:bg-gray-200 font-medium;
        }
        .game-category-btn.active {
            @apply bg-accent text-dark hover:bg-accent/90;
        }
        
        /* 游戏卡片样式 */
        .game-card {
            @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300;
        }
        .game-card:hover {
            @apply shadow-lg transform -translate-y-1;
        }
        .game-card-img {
            @apply w-full h-40 object-cover;
        }
        .game-card-content {
            @apply p-4;
        }
        .game-card-title {
            @apply text-lg font-bold mb-2;
        }
        .game-card-desc {
            @apply text-gray-600 text-sm mb-3;
        }
        .game-card-footer {
            @apply flex justify-between items-center mt-2;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark min-h-screen flex flex-col">
    <!-- 游戏背景 -->
    <div class="fixed inset-0 z-0 opacity-10 bg-cover bg-center bg-village-bg"></div>
    
    <!-- 导航栏 -->
    <nav id="game-navbar" class="bg-primary/95 text-white shadow-lg z-50 sticky top-0">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-home text-2xl text-accent"></i>
                <h1 class="text-xl font-bold">镇长日志</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-4">
                <span id="stage-display" class="px-3 py-1 bg-accent/20 rounded-full text-sm">
                    <i class="fa fa-map-marker mr-1"></i>
                    <span id="current-stage">游戏大厅</span>
                </span>
                <span id="consecutive-days" class="px-3 py-1 bg-accent/20 rounded-full text-sm">
                    <i class="fa fa-calendar-check-o mr-1"></i>
                    连续签到 <span id="days-count">1</span> 天
                </span>
            </div>
            
            <div class="flex items-center space-x-4">
                <!-- 用户菜单 - 带下拉功能 -->
                <div class="relative">
                    <button id="user-menu-btn" class="flex items-center space-x-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors group">
                            <div id="avatar-placeholder" class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center">
                                <i class="fa fa-user text-dark"></i>
                            </div>
                            <span id="user-name" class="text-sm font-medium">
                                <!-- 这里会显示用户名，确保清晰可见 -->
                                登录/注册
                            </span>
                            <i class="fa fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                        </button>
                    
                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-2 z-50 hidden">
                        <!-- 登录/注册部分 (未登录时显示) -->
                        <div id="login-register" class="px-4 py-2">
                            <p class="text-sm text-gray-500 mb-2">请登录或注册以开始游戏</p>
                            <div class="flex flex-col space-y-2">
                                <a href="../user/login.html" class="px-4 py-2 bg-secondary text-dark rounded-md text-sm hover:bg-secondary/90 transition-colors">
                                    <i class="fa fa-sign-in mr-2"></i>登录
                                </a>
                                <a href="register.html" class="px-4 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-user-plus mr-2"></i>注册
                                </a>
                            </div>
                        </div>
                        
                        <!-- 用户信息部分 (登录后显示) -->
                        <div id="user-info" class="hidden">
                                <div class="px-4 py-3 border-b border-gray-200">
                                    <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-900"><span id="dropdown-username">小镇名称</span></p>
                                        <span class="text-xs text-gray-600 font-medium">小镇</span>
                                    </div>
                                    <div id="dropdown-avatar" class="w-8 h-8 rounded-full overflow-hidden">
                                        <img src="" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                    </div>
                                </div>
                                <div class="px-4 py-2 text-sm text-gray-500">
                                    <p>游戏积分: <span id="dropdown-points">0</span></p>
                                </div>
                                <a href="../user/user-center.html" class="w-full text-left px-4 py-2.5 text-sm text-primary font-medium bg-primary/10 hover:bg-primary/20 transition-colors rounded-md my-1">
                                    <i class="fa fa-user-circle mr-2"></i>个人中心
                                </a>
                                <button id="change-avatar-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-camera mr-2"></i>修改头像
                                </button>
                                <button id="logout-btn" class="w-full text-left px-4 py-2 text-sm text-danger hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    
    <script>
        // 用户菜单下拉功能和用户信息显示
        document.addEventListener('DOMContentLoaded', function() {
            const userMenuBtn = document.getElementById('user-menu-btn');
            const userDropdown = document.getElementById('user-dropdown');
            const userNameElement = document.getElementById('user-name');
            const dropdownUsername = document.getElementById('dropdown-username');
            const loginRegisterSection = document.getElementById('login-register');
            const userInfoSection = document.getElementById('user-info');
            
            // 检查登录状态并更新用户信息显示
            function checkLoginStatus() {
                // 使用 getUserInfo 函数获取用户信息（支持多个键）
                const user = getUserInfo();
                if (user) {
                    try {
                        // 添加调试信息
                        console.log('=== AI调试信息（游戏页面）===');
                        console.log('用户数据:', user);
                        console.log('小镇名称(username):', user.username);
                        console.log('================');
                        
                        // 确保显示有效的小镇名称
            let townName = user.username;
            if (!townName || typeof townName !== 'string') {
                townName = '快乐小镇'; // 默认小镇名称
            }
                        
                        // 更新显示
                        if (userNameElement) userNameElement.textContent = townName;
                        if (dropdownUsername) dropdownUsername.textContent = townName;
                        
                        // 切换显示登录/用户信息区域
                        if (loginRegisterSection) loginRegisterSection.classList.add('hidden');
                        if (userInfoSection) userInfoSection.classList.remove('hidden');
                        
                    } catch (error) {
                        console.error('解析用户信息失败:', error);
                    }
                }
            }
            
            // 初始检查登录状态
            checkLoginStatus();
            
            if (userMenuBtn && userDropdown) {
                // 点击切换下拉菜单
                userMenuBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    userDropdown.classList.toggle('hidden');
                    // 点击时再次检查登录状态，确保信息最新
                    checkLoginStatus();
                });
                
                // 悬停显示下拉菜单（增强用户体验）
                userMenuBtn.addEventListener('mouseenter', function() {
                    userDropdown.classList.remove('hidden');
                });
                
                userMenuBtn.addEventListener('mouseleave', function() {
                    setTimeout(() => {
                        const isHovering = userDropdown.matches(':hover') || userMenuBtn.matches(':hover');
                        if (!isHovering) {
                            userDropdown.classList.add('hidden');
                        }
                    }, 200);
                });
                
                userDropdown.addEventListener('mouseleave', function() {
                    setTimeout(() => {
                        const isHovering = userDropdown.matches(':hover') || userMenuBtn.matches(':hover');
                        if (!isHovering) {
                            userDropdown.classList.add('hidden');
                        }
                    }, 200);
                });
                
                // 点击页面其他地方关闭下拉菜单
                document.addEventListener('click', function() {
                    userDropdown.classList.add('hidden');
                });
                
                // 阻止下拉菜单内的点击事件冒泡
                userDropdown.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
            
            // 退出登录功能
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', function() {
                    // 确认退出
                    if (confirm('确定要退出登录吗？')) {
                        try {
                            // 清除所有用户相关的localStorage数据
                            localStorage.removeItem('currentUser');
                            localStorage.removeItem('user');
                            localStorage.removeItem('userInfo');
                            
                            // 更新UI显示
                            if (loginRegisterSection) loginRegisterSection.classList.remove('hidden');
                            if (userInfoSection) userInfoSection.classList.add('hidden');
                            if (userNameElement) userNameElement.textContent = '登录/注册';
                            
                            // 关闭下拉菜单
                            if (userDropdown) userDropdown.classList.add('hidden');
                            
                            // 显示退出成功通知
                            if (typeof showNotification === 'function') {
                                showNotification('退出成功', '您已成功退出登录', 'success');
                            } else {
                                alert('您已成功退出登录');
                            }
                            
                            // 刷新页面以重置游戏状态
                            location.reload();
                        } catch (error) {
                            console.error('退出登录出错:', error);
                            if (typeof showNotification === 'function') {
                                showNotification('退出失败', '退出登录过程中发生错误', 'error');
                            } else {
                                alert('退出登录失败，请重试');
                            }
                        }
                    }
                });
            }
        });
    </script>
    
    <!-- 主要游戏区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 pb-20 z-10 relative main-content" id="main-content">
        <!-- 页面标题和返回按钮 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold flex items-center">
                <i class="fa fa-gamepad text-accent mr-2"></i>
                游戏大厅
            </h1>
            <a href="../../index.html" class="px-3 py-1.5 bg-gray-200 text-dark rounded-full flex items-center hover:bg-gray-300 transition-colors text-sm">
                <i class="fa fa-arrow-left mr-1"></i>
                返回首页
            </a>
        </div>

        <!-- 游戏分类标签页 -->
        <div class="mb-6 overflow-x-auto">
            <div class="flex space-x-4 min-w-max">
                <button class="game-category-btn active" data-category="all">
                    <i class="fa fa-th-large mr-2"></i>全部游戏
                </button>
                <button class="game-category-btn" data-category="strategy">
                    <i class="fa fa-chess-board mr-2"></i>策略经营
                </button>
                <button class="game-category-btn" data-category="simulation">
                    <i class="fa fa-city mr-2"></i>模拟建设
                </button>
                <button class="game-category-btn" data-category="adventure">
                    <i class="fa fa-compass mr-2"></i>冒险探索
                </button>
                <button class="game-category-btn" data-category="puzzle">
                    <i class="fa fa-puzzle-piece mr-2"></i>解谜益智
                </button>
            </div>
        </div>

        <!-- 搜索和排序 -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0">
            <div class="flex items-center">
                <div class="relative">
                    <input type="text" id="game-search" placeholder="搜索游戏..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-sm text-gray-500">排序:</span>
                <select id="game-sort" class="px-3 py-2 rounded-lg border border-gray-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary text-sm">
                    <option value="popular">热门优先</option>
                    <option value="newest">最新上线</option>
                    <option value="rating">评分最高</option>
                </select>
            </div>
        </div>

        <!-- 游戏列表 -->
        <div class="mb-10">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa fa-fire text-warning mr-2"></i>
                热门游戏
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="games-container">
                <!-- 镇长日志游戏卡片 -->
                <div class="game-card" data-category="strategy">
                    <img src="https://picsum.photos/id/1043/600/400" alt="镇长日志" class="game-card-img">
                    <div class="game-card-content">
                        <h3 class="game-card-title">镇长日志</h3>
                        <p class="game-card-desc">作为新任镇长，管理资源、建设小镇、发展经济，带领居民共同打造繁荣社区。</p>
                        <div class="flex items-center space-x-2 mb-3">
                            <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full text-xs">策略经营</span>
                            <span class="bg-accent/10 text-accent px-2 py-0.5 rounded-full text-xs">热门推荐</span>
                        </div>
                        <div class="game-card-footer">
                            <div class="flex items-center">
                                <i class="fa fa-star text-warning mr-1"></i>
                                <span class="text-sm">4.8分</span>
                            </div>
                            <a href="./mayor-log/index.html" class="play-game-btn px-4 py-1.5 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors inline-flex items-center">
                                <i class="fa fa-play mr-1"></i>开始游戏
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 这里可以添加其他游戏卡片 -->
            </div>
        </div>
        
        <!-- 新游戏即将上线 -->
        <div class="mb-10">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa fa-clock-o text-primary mr-2"></i>
                即将上线
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 即将上线的游戏 -->
                <div class="game-card opacity-70">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1059/600/400" alt="贸易帝国" class="game-card-img filter grayscale">
                        <div class="absolute top-3 right-3 bg-warning text-dark py-1 px-3 rounded-full text-xs font-bold">即将上线</div>
                    </div>
                    <div class="game-card-content">
                        <h3 class="game-card-title">贸易帝国</h3>
                        <p class="game-card-desc">建立贸易路线，探索新市场，打造自己的贸易帝国，成为商业巨擘。</p>
                        <div class="flex items-center space-x-2 mb-3">
                            <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full text-xs">策略经营</span>
                        </div>
                        <div class="game-card-footer">
                            <div class="flex items-center">
                                <i class="fa fa-users text-gray-400 mr-1"></i>
                                <span class="text-sm text-gray-500">期待度：86%</span>
                            </div>
                            <button class="px-4 py-1.5 bg-gray-300 text-gray-600 rounded-full cursor-not-allowed">
                                敬请期待
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="game-card opacity-70">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1070/600/400" alt="农场物语" class="game-card-img filter grayscale">
                        <div class="absolute top-3 right-3 bg-warning text-dark py-1 px-3 rounded-full text-xs font-bold">即将上线</div>
                    </div>
                    <div class="game-card-content">
                        <h3 class="game-card-title">农场物语</h3>
                        <p class="game-card-desc">打造自己的梦想农场，饲养动物，种植农作物，建设设施，体验田园生活。</p>
                        <div class="flex items-center space-x-2 mb-3">
                            <span class="bg-secondary/10 text-secondary px-2 py-0.5 rounded-full text-xs">模拟建设</span>
                        </div>
                        <div class="game-card-footer">
                            <div class="flex items-center">
                                <i class="fa fa-users text-gray-400 mr-1"></i>
                                <span class="text-sm text-gray-500">期待度：92%</span>
                            </div>
                            <button class="px-4 py-1.5 bg-gray-300 text-gray-600 rounded-full cursor-not-allowed">
                                敬请期待
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 通知弹窗 -->
    <div id="notification" class="fixed bottom-16 md:bottom-6 right-6 bg-dark text-white p-4 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i id="notification-icon" class="fa fa-info-circle mr-2 text-accent"></i>
        <span id="notification-title" class="font-bold mr-2"></span>
        <span id="notification-message">通知消息</span>
    </div>
    
    <!-- 底部导航栏 -->
    <div id="bottom-navbar" class="fixed bottom-0 left-0 right-0 bg-white/95 shadow-lg border-t border-gray-200 z-50 backdrop-blur-sm">
        <div class="flex justify-around items-center">
                <a href="../../index.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="games_list.html" class="flex flex-col items-center py-3 px-6 text-primary relative">
                <i class="fa fa-gamepad text-xl mb-1"></i>
                <span class="text-xs font-medium">游戏</span>
                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-primary rounded-t-full"></span>
            </a>
            <a href="../shop/shop.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-shopping-bag text-xl mb-1"></i>
                <span class="text-xs">商店</span>
            </a>
            <a href="../user/user-center.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>
    
    <!-- 游戏相关脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 游戏分类切换功能
            const categoryBtns = document.querySelectorAll('.game-category-btn');
            const gameCards = document.querySelectorAll('.game-card');
            
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 更新按钮状态
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    const category = this.getAttribute('data-category');
                    
                    // 过滤游戏卡片
                    gameCards.forEach(card => {
                        if (category === 'all' || card.getAttribute('data-category') === category) {
                            card.classList.remove('hidden');
                        } else {
                            card.classList.add('hidden');
                        }
                    });
                });
            });
            
            // 搜索功能
            const searchInput = document.getElementById('game-search');
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase().trim();
                    
                    gameCards.forEach(card => {
                        const title = card.querySelector('.game-card-title').textContent.toLowerCase();
                        const desc = card.querySelector('.game-card-desc').textContent.toLowerCase();
                        
                        if (title.includes(searchTerm) || desc.includes(searchTerm)) {
                            card.classList.remove('hidden');
                        } else {
                            card.classList.add('hidden');
                        }
                    });
                });
            }
            
            // 排序功能
            const sortSelect = document.getElementById('game-sort');
            const gamesContainer = document.getElementById('games-container');
            
            if (sortSelect && gamesContainer) {
                sortSelect.addEventListener('change', function() {
                    const sortOption = this.value;
                    const gamesList = Array.from(gamesContainer.children);
                    
                    gamesList.sort((a, b) => {
                        if (sortOption === 'popular') {
                            // 根据热度排序（这里使用游戏评分作为示例）
                            const ratingA = parseFloat(a.querySelector('.fa-star').nextElementSibling.textContent);
                            const ratingB = parseFloat(b.querySelector('.fa-star').nextElementSibling.textContent);
                            return ratingB - ratingA;
                        }
                        
                        if (sortOption === 'newest') {
                            // 这里可以根据游戏发布日期排序
                            // 为简化示例，我们使用DOM顺序的反向
                            return gamesList.indexOf(a) - gamesList.indexOf(b);
                        }
                        
                        if (sortOption === 'rating') {
                            // 根据评分排序
                            const ratingA = parseFloat(a.querySelector('.fa-star').nextElementSibling.textContent);
                            const ratingB = parseFloat(b.querySelector('.fa-star').nextElementSibling.textContent);
                            return ratingB - ratingA;
                        }
                        
                        return 0;
                    });
                    
                    // 重新添加排序后的卡片
                    gamesList.forEach(card => {
                        gamesContainer.appendChild(card);
                    });
                });
            }
            
            // 由于使用了直接链接，不再需要游戏卡片点击事件
            
            // 显示通知功能
            window.showNotification = function(message, type = 'info') {
                const notification = document.getElementById('notification');
                const notificationIcon = document.getElementById('notification-icon');
                const notificationMessage = document.getElementById('notification-message');
                
                if (!notification || !notificationIcon || !notificationMessage) return;
                
                notificationMessage.textContent = message;
                
                // 设置图标和颜色
                let iconClass = 'fa-info-circle text-accent';
                if (type === 'success') iconClass = 'fa-check-circle text-success';
                else if (type === 'error') iconClass = 'fa-exclamation-circle text-danger';
                else if (type === 'warning') iconClass = 'fa-exclamation-triangle text-warning';
                
                notificationIcon.className = `fa ${iconClass} mr-2`;
                
                // 显示通知
                notification.classList.remove('translate-y-20', 'opacity-0');
                
                // 3秒后隐藏
                setTimeout(() => {
                    notification.classList.add('translate-y-20', 'opacity-0');
                }, 3000);
            }
        });
    </script>
</body>
</html>
